<template>
	<div>
		<div class="overlay">
			<div class="overlay-content scrolling">
				<van-nav-bar title="首页资产管理" left-text left-arrow @click-left="$router.back()" @click-right="$router.push({path:'Search'})">
					<van-icon name="search" slot="right" size="22" />
				</van-nav-bar>
				<!-- 默认排序 -->
				<div class="rank">
					<span>默认排序</span>
					<img src="../../assets/images/paixu_06.png" alt @click="show = true" />
				</div>

				<van-swipe-cell v-for="(el,i) in list" :key="i">
					<div class="tft" :style="{backgroundColor: (i == 0 ? '#fafbfc' : ''),height:'60px'}">
						<img class="shanchugang" src="../../assets/images/shanchugang_03.png" alt v-show="i > 0" />
						<img class="txing" :src="el.logoUrl" alt />
						<div class="tftright">
							<span class="tftzi" v-text="el.tokenName"></span>
							<p v-show="i > 0" v-text="i > 0 ? el.contract.substr(0, 8) + '....' + el.contract.substr(el.contract.length - 8, 8) : ''"></p>
							<p>
								余额
								<span v-text="el.balance"></span>
							</p>
						</div>
					</div>
					<template slot="right" v-if="i > 0">
						<van-button square type="danger" text="删除" @click="onClose(el.tokenId)" />
					</template>
				</van-swipe-cell>

				<!-- 选择排序方式 -->
				<van-action-sheet v-model="show" :actions="actions" cancel-text="取消" description="选择排序方式" @select="onSelect" />
			</div>
		</div>
	</div>
</template>

<script>
	import { assets } from '../../utils/api.js'
	export default {
		data() {
			return {
				show: false,
				ativel: false,
				ativer: false,
				list: [],
				actions: [{
						name: "默认排序"
					},
					{
						name: "价值排序"
					},
					{
						name: "名称排序"
					}
				]
			};
		},
		mounted() {
			this.getList();
		},
		methods: {
			getList() {
				assets.getAssets({
					address: localStorage.address,
					type: 'ETH_NODE'
				}).then(res => {
					if(res.code == 200) {
						this.list = res.data;
					}
				})
			},
			onClose(i) {
				assets.getDelWallet({
					address:localStorage.address,
					tokenId:i
				}).then(res => {
					if(res.code == 200){
						this.$toast(res.msg);
						this.getList();
					}
				})
			},
			onSelect(item) {
				console.log(item.name);
			},
			deleteImg() {
				this.ativel = true;
				this.ativer = false;
			},
			cloceImg() {
				(this.ativel = false), (this.ativer = true);
			}
		}
	};
</script>

<style lang="less" scoped>
	.ativeLeft {
		transform: translate3d(-60px, 0px, 0px);
		transition-duration: 0.6s;
	}
	
	.aviveR {
		transform: translate3d(0px, 0px, 0px);
		transition-duration: 0.6s;
	}
	
	.van-nav-bar {
		.van-nav-bar__title {
			font-size: 15px;
			color: #333333;
		}
		.van-icon {
			font-size: 18px;
			color: #333333 !important;
		}
	}
	
	.rank {
		height: 38px;
		border-bottom: 1px solid #ebedf0;
		line-height: 35px;
		text-align: right;
		padding-right: 15px;
		color: #b3b3b3;
		img {
			display: inline-block;
			width: 14px;
		}
		span {
			font-size: 14px;
		}
	}
	
	.tft::before {
		content: "";
		position: absolute;
		width: 100%;
		bottom: 0;
		border-bottom: 1px solid #ebedf0;
		left: 45px;
	}
	
	.tft {
		height: 74px;
		display: flex;
		position: relative;
		.van-button--danger {
			position: absolute;
			right: 0;
			top: 50%;
			transform: translate(100%, -50%);
			height: 75px;
		}
		.shanchugang {
			display: block;
			width: 15px;
			height: 15px;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 20px;
		}
		.txing {
			display: inline-block;
			height: 32px;
			width: 30px;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 50px;
		}
		.tftright {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 90px;
			.tftzi {
				font-size: 14px;
			}
			p {
				font-size: 12px;
				color: #b3b3b3;
			}
		}
		.shanyou {
			display: inline-block;
			height: 12px;
			width: 15px;
			position: absolute;
			right: 16px;
			top: 50%;
			transform: translateY(-50%);
		}
	}
	
	/deep/.van-swipe-cell__right {
		line-height: 60px;
		background-color: #ee0a24;
	}
	
	.van-action-sheet__name {
		color: #007be2;
	}
	
	.van-popup--bottom.van-popup--round {
		border-radius: 0;
		padding: 17px 10px 7px;
		box-sizing: border-box;
		background-color: #f2f4f5;
	}
	
	.van-action-sheet__description {
		background-color: #fff;
		border-radius: 15px 15px 0 0;
	}
	
	.van-action-sheet__item:nth-child(4) {
		border-radius: 0 0 15px 15px;
	}
	
	.van-action-sheet__cancel {
		border-radius: 25px 25px 15px 15px;
	}
	
	/deep/ .van-button {
		height: 60px;
	}
</style>